<script setup>
import XEUtils from "xe-utils";

const props = defineProps({
  options: { type: Object, default: () => ({}) },
  data: { type: Array, default: () => [] },
  child: { type: Array, default: () => [] },
});
const total = ref({});

watch(
  () => props.data,
  () => {
    total.value = props.data;
  },
  {
    deep: true,
  }
);
const getValue = (val, flage) => {
  let str = "";
  if (XEUtils.isObject(val)) {
    for (let key in val) {
      let num = `${flage ? flage : ""}${val[key]}`;
      str += `${key} : ${num}   `;
    }
  } else {
    str = val;
  }
  console.log(str);
  return str;
};
</script>

<template>
  <div class="flex gap-3 text-gray-500">
    <div v-for="(d, i) in options" :key="i">
      <span class="inline-block w-2 h-2 bg-blue-500 rounded-md"></span>
      {{ d.title }}:
      <span>{{
        getValue(total[d.key], d.symbol) || 0
      }}</span>
    </div>
  </div>
</template>
